<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit" />
    <!-- 让360浏览器默认选择webkit内核 -->

    <!-- 全局css -->
    <link rel="shortcut icon" href="/static/favicon.ico">
    <link href="/static/libs/bootstrap/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/libs/font-awesome/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/static/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/libs/bootstrap-treetable/bootstrap-treetable.css" rel="stylesheet"/>
    <link href="/static/libs/validate/bootstrapValidator.min.css" rel="stylesheet">
    <link href="/static/libs/webuploader/webuploader.css" rel="stylesheet">
    <link href="/static/libs/ztree/zTreeStyle.css" rel="stylesheet">
    <link href="/static/libs/select2/select2.min.css" rel="stylesheet">
    <link href="/static/libs/hisui/css/hisui.css" rel="stylesheet">
    <link href="/static/backend/common.css" rel="stylesheet">


    <!-- 全局js -->
    <script src="/static/libs/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="/static/libs/jquery/clipboard.min.js"></script>
    <script src="/static/libs/jquery/cropbox.min.js"></script>
    <script src="/static/libs/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="/static/libs/ztree/jquery.ztree.all.min.js"></script>
    <script src="/static/libs/ztree/jquery.ztree.exhide.min.js"></script>
    <script src="/static/libs/ztree/fuzzySearch.js"></script>
    <script src="/static/libs/validate/bootstrapValidator.min.js"></script>
    <script src="/static/libs/validate/zh_CN.js"></script>
    <script src="/static/libs/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/static/libs/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="/static/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="/static/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
    <script src="/static/libs/layer/layer.js"></script>
    <script src="/static/libs/laydate/laydate.js"></script>
    <script src="/static/libs/webuploader/webuploader.min.js"></script>
    <script src="/static/libs/jquery-form/jquery.form.js"></script>
    <script src="/static/libs/select2/select2.full.min.js"></script>
    <script src="/static/libs/hisui/js/jquery.hisui.js"></script>
    <script src="/static/libs/hisui/js/locale/hisui-lang-zh_CN.js"></script>
    <script src="/static/common/js/ajax-object.js"></script>
    <script src="/static/common/js/bootstrap-table-object.js"></script>
    <script src="/static/common/js/hisui-datagrid-object.js"></script>
    <script src="/static/common/js/tree-table-object.js"></script>
    <script src="/static/common/js/web-upload-object.js"></script>
    <script src="/static/common/js/ztree-object.js"></script>
    <script src="/static/common/js/Sys.js"></script>



</head>
<body style="height: 100%;">
<div class="inner-fit">
    <div class="hisui-layout" data-options="fit:true">
        <div data-options="region:'west',title:'文件夹列表',split:true,split:true" style="width:180px;">
            <div class="dhcc-hisui-toolbar">
                <div class="dhcc-hisui-toolbar-seach">
                    <input type="text" id="seachKey" value="" class="textbox" />
                </div>
            </div>
            <ul id="folderTree" class="ztree"></ul>
        </div>
        <div data-options="region:'east',title:'已选择的文件',split:true" style="overflow-x: hidden;width:220px;">
            <div class="row">
                <div class="col-xs-12">
                    <div id="chosen">
                    </div>
                </div>
            </div>
        </div>
        <div data-options="region:'center',title:'文件列表',split:true"  style="overflow-x: hidden;padding:10px">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <div class="hidden-xs" id="AddfilesTableToolbar" role="group">
                        <button type="button" class="hisui-linkbutton    l-btn l-btn-small" data-options="iconCls:'icon-w-import' " onclick="AddFile.confirm()">
                           确认
                        </button>
                        <button type="button" class="hisui-linkbutton   l-bt-green l-btn l-btn-small" data-options="iconCls:'fa fa-plus' " onclick="AddFile.close()" >
                            取消
                           </button>
                    </div>
                    <table id="AddfilesTable" data-mobile-responsive="true" data-click-to-select="true">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    /**
     * 消息模块的消息信件管理管理初始化
     */
    var AddFile = {
        id: "AddfilesTable",	//表格id
        seItem: null,		//选中的条目
        table: null,
        layerIndex: -1,
        documentId:0,
        filemap:{},
        response:null,
    };

    /**
     * 初始化表格的列
     */
    AddFile.initColumn = function () {
        return [
            {field: 'selectItem', radio: true},
            {title: '文件名称', field: 'fileName', align: 'center', valign: 'middle', sortable: false},
            {title: '文件大小', field: 'fileSize', align: 'center', valign: 'middle', sortable: false}
        ];
    };

    /**
     * 查询列表
     */
    AddFile.search = function () {
        var queryData = {};
        queryData['folderId'] = this.documentId;
        AddFile.table.refresh({query: queryData});
    };

    AddFile.onClickDict = function (e, treeId, treeNode) {
        AddFile.documentId = treeNode.id;
        AddFile.search();
    };
    /**
     * 确认按钮
     */
    AddFile.confirm = function () {
        $.each(AddFile.filemap, function (key, value) {
            AddFile.response(key, value);
        });
        AddFile.close();
    };
    /**
     * 设置确定时执行函数
     */
    AddFile.setResponse = function (response) {
        AddFile.response = response;
    };
    /**
     *关闭
     **/
    AddFile.close = function() {
        parent.layer.close(parent.layer.getFrameIndex(window.name)); //先得到当前iframe层的索引,再执行关闭
    }
    /**
     * 通过点击行触发事件
     */
    $('#AddfilesTable').on('click-row.bs.table', function (e,row,$element) {
        if(AddFile.filemap[row.id] == null || AddFile.filemap[row.id] == ""||AddFile.filemap[row.id] == "undefined"){
            AddFile.filemap[row.id] = row.fileName;
        }else {
            AddFile.filemap[row.id] = "";
        }
        $("#chosen").empty();
        $.each(AddFile.filemap, function (key, value) {
            if(value != ""){
                var _html = '';
                _html += '<div style="margin-left: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">';
                _html += '<a  href="javascript:void(0);" onclick="AddFile.delItem(this,this.id)"   id="'+ key +'"><span class="hisui-icon icon-cancel">&nbsp;</span></a>';
                _html +=  value;
                _html += '<hr style="margin: 0px">';
                _html += '<div>';
                $("#chosen").append(_html);
            }
        });
    });
    AddFile.delItem = function (obj,id) {
        AddFile.filemap[id] = "";
        $(obj).parent().remove();
    };

    $(function () {
        var defaultColunms = AddFile.initColumn();
        var table = new BSTable(AddFile.id, Sys.backendPath + "/pan/file/list", defaultColunms);
        table.pageSize=5;
        table.setPaginationType("server");
        AddFile.table = table.init();
        var ztree = new $ZTree("folderTree", Sys.backendPath + "/pan/folder/tree");
        ztree.bindOnClick(AddFile.onClickDict);
        ztree.init();
        AddFile.ztree = ztree;
        fuzzySearch('folderTree','#seachKey',null,true);
    });

</script>
</body>
</html>
